:root {
  --accent: linear-gradient(to bottom, #98cc4f 0%, #AFC97E 100%);
  --accent-plain: #34c254;
  --primary: linear-gradient(to bottom, #82d07b 0%, #548357 100%);
  --primary-10p: linear-gradient(to bottom, #82d07b10 0%, #35c28510 100%);
  --primary-plain: #35c285;
  --secondary-10p: linear-gradient(to bottom, #83e5a910 0%, #34c2b510 100%);
  --secondary-plain: #34c2b5;
  --accent-hov: linear-gradient(to bottom, #b3e56f 0%, #4acf6a 100%);
  --primary-hov: linear-gradient(to bottom, #9be995 0%, #4bcfb7 100%);
  --secondary-hov: linear-gradient(to bottom, #9bfad9 0%, #4acfe2 100%);
  --accent-border: #92c44ebb;
  --primary-border: #6ec280bb;
  --secondary-border: #A7C957;
  --text: #0e0e0e;
  --subheading: #458c6d;
  --main-neutral: #ffffff;
  --sec-neutral: #f5f8fa;
  --footer: #1d201f;
  font-size: 16px;
  --base: 16px;
  --lh-head: 1.25;
}

* {
  /* font-family: "Hanken Grotesk", sans-serif; */
font-family: 'Inter' , sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  scroll-behavior: smooth;
}

body {
  background-color: var(--sec-neutral);
  display: block;
  position: relative;
}

/* Typography */
h1 {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  text-align: center;
}

h1.sub {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 400;
  color: var(--subheading);
  opacity: 0.75;
  max-width: max(70%, 800px);
}

h2 .hl {
  font-weight: 900;
  background: #AFC97E;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family:  'Fredoka', sans-serif;
}

h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

h2 span.monospace {
  /* font-family: "Gemunu Libre", sans-serif; */
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

h3 {
  font-size: clamp(18px, 3vw, 21px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

small {
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
}

p,
a,
li {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.01em;
  text-wrap: wrap;
}

a {
  cursor: pointer;
}

p.thin,
a.thin,
li.thin {
  font-weight: 300;
  opacity: 0.8;
  width: 600px;
}

/* Buttons - Consolidated */
a.btn,
button.btn {
  padding: clamp(6px, 1vw, 8px) clamp(16px, 2vw, 24px) !important;
  border-radius: 30px;
  color: #ffffff;
  border: solid 1px;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  z-index: 1;
  cursor: pointer;
}

a.btn::before,
button.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  background: #ffffff;
  opacity: 1;
  transition: 0.2s ease-in-out;
  z-index: -1;
  border-radius: 200px;
}

a.btn:hover::before,
button.btn:hover::before {
  width: 150%;
  height: 200px;
}

a.btn:active,
button.btn:active {
  opacity: 0.5;
}

a.btn.btn-main,
button.btn.btn-main {
  border-color: var(--accent-border);
  background: var(--accent);
}

a.btn.btn-main:hover,
button.btn.btn-main:hover {
  color: var(--accent-border);
}

a.btn.btn-sec,
button.btn.btn-sec {
  border-color: var(--secondary-border);
  background: var(--secondary);
}

a.btn.btn-sec:hover,
button.btn.btn-sec:hover {
  color: var(--secondary-border);
}

a.btn.btn-other,
button.btn.btn-other {
  border-color: var(--secondary-border);
  opacity: 0.75;
  color: var(--secondary-border);
}

a.btn.btn-other:hover,
button.btn.btn-other:hover {
  color: #fff;
}

a.btn.btn-other:active,
button.btn.btn-other:active {
  opacity: 0.25;
}

a.btn.btn-other::before,
button.btn.btn-other::before {
  background: var(--secondary);
}

.btn.loading::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Layout Utilities */
section.wContainer {
  display: flex;
  width: 100%;
  padding: 96px;
  gap: 64px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media (max-width: 970px) {
  section.wContainer {
    padding: 96px 24px;
  }
}

i.hicon {
  color: var(--secondary-plain);
  opacity: 0.3;
  font-size: clamp(48px, 5vw, 64px);
}

.pack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pack.hpack {
  gap: 8px;
}

.pack.shpack {
  gap: 16px;
  padding: 40px;
}

.primary-color {
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.primary-color-plain {
  color: var(--primary-plain);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0px;
  justify-content: start;
  align-items: start;
  position: relative;
}
.input-group label {
  font-size: 16px;
  left: 24px;
  top: 16px;
  opacity: 0.25;
  transition: 0.3s ease-in-out;
  pointer-events: none;
  position: absolute;
}
.input-group label.textarea-label {
  top: 12px;
}
.input-group input[type="text"],
.input-group input[type="email"],
.input-group textarea {
  padding-block: 16px;
  padding-inline: 24px;
  border-radius: 20px;
  background: #fbfbfb;
  border: 1px solid #c7c7c788;
  transition: 0.3s;
  width: 100%;
  font-size: 16px;
  font-weight: 300;
}
.input-group textarea {
  min-height: 100px;
  padding-block: 12px;
  resize: none;
}
.input-group input[type="text"]:not(:placeholder-shown),
.input-group input[type="email"]:not(:placeholder-shown),
.input-group textarea:not(:placeholder-shown) {
  border-color: #c7c7c788;
}
.input-group input[type="text"]:focus,
.input-group input[type="email"]:focus,
.input-group textarea:focus {
  border-color: var(--primary-plain);
}
.input-group:has(input:not(:placeholder-shown)) label,
.input-group:has(textarea:not(:placeholder-shown)) label {
  color: #c7c7c788;
  opacity: 1;
  font-size: 14px;
  transform: translateX(-10px);
  top: -20px;
}
.input-group:focus-within label {
  color: var(--primary-plain) !important;
  opacity: 1;
  font-size: 14px;
  transform: translateX(-10px);
  top: -20px;
}
.input-group input[type="file"] {
  padding-block: 16px;
  padding-inline: 24px;
  border-radius: 20px;
  background: #fbfbfb;
  border: 1px solid #c7c7c788;
  transition: 0.3s;
  width: 100%;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
}

.input-group input[type="file"]:focus {
  border-color: var(--primary-plain);
}

.input-group input[type="file"]::file-selector-button {
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  background: var(--primary);
  color: white;
  cursor: pointer;
  margin-right: 16px;
  font-weight: 500;
  transition: 0.3s;
}

.input-group input[type="file"]::file-selector-button:hover {
  background: var(--primary-hov);
}
.keywords-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 12px;
}

.keyword-chip {
  padding: 10px 20px;
  border-radius: 50px;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  border: 1.5px solid #d0d0d0;
  background: var(--main-neutral);
  color: var(--text);
  user-select: none;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}

.keyword-chip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  background: var(--primary);
  transition: width 0.3s ease, height 0.3s ease;
  z-index: -1;
  border-radius: 200px;
}

.keyword-chip:hover {
  border-color: var(--primary-plain);
  transform: translateY(-1px);
}

.keyword-chip.active {
  border-color: var(--primary-plain);
  color: #ffffff;
}

.keyword-chip.active::before {
  width: 200px;
  height: 200px;
}

.keyword-chip.active:hover::before {
  background: var(--primary-hov);
}

.form-error {
  background: #ff888844;
  border: 1px solid #ff333355;
  border-radius: 20px;
  padding: 16px 24px;
  width: 100%;
  color: #ff0000;
  text-align: center;
  display: none;
}
.form-error.visible {
  display: block;
  position: relative;
  animation: error-anim 0.5s ease-out 0s 1 forwards;
}

.form-success {
  background: #88ff9844;
  border: 1px solid #3aff3355;
  border-radius: 20px;
  padding: 16px 24px;
  width: 100%;
  color: #26aa15;
  text-align: center;
  display: none;
}
.form-success.visible {
  display: block;
  position: relative;
  animation: error-anim 0.5s ease-out 0s 1 forwards;
}




@keyframes error-anim {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 0.75;
    transform: translateY(0);
  }
}

/* Navigation */
#nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 64px;
  background-color: #ffffffaa;
  backdrop-filter: blur(10px);
  position: fixed;
  width: 100%;
  z-index: 999;
  box-shadow: 0px 10px 10px #00000005;
}

#nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
}

#nav ul li a {
  text-decoration: none;
  position: relative;
  opacity: 0.75;
  transition: 0.2s ease-in-out;
}

#nav ul li a::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 0px;
  background: var(--primary);
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.2s ease-in-out;
}

@media (min-width: 970px) {
  #nav ul li a:hover {
    opacity: 1;
  }
  #nav ul li a:hover:before {
    width: 85%;
  }
}

#nav-logo {
  font-size: 24px;
  text-decoration: none;
}

.nav-mobile {
  display: none;
}

.close-mobile {
  display: none;
  background-color: transparent;
  font-size: 24px;
}

.close-mobile #hamburger,
.close-mobile #close {
  transition: 0.2s ease-in-out;
}

.close-mobile #close {
  position: absolute;
  opacity: 0;
}

.close-mobile.toggle #hamburger {
  opacity: 0;
}

.close-mobile.toggle #close {
  opacity: 1;
}

@media (max-width: 970px) {
  #nav-cta {
    display: none;
  }
  #nav {
    padding: 0 32px;
  }
  #nav ul {
    flex-direction: column;
    position: absolute;
    justify-content: start;
    align-items: end;
    top: 0;
    right: 0;
    margin-top: 80px;
    margin-right: 16px;
    width: 100%;
    gap: 8px;
  }
  #nav ul li a {
    padding: 8px 16px;
    display: inline-flex;
    background-color: #ffffff;
    border-radius: 100px;
    opacity: 1;
    box-shadow: 0px 8px 10px #00000011;
  }
  #nav ul li {
    position: relative;
    transition: 0.5s ease-in-out;
    pointer-events: unset;
  }
  #nav ul:has(> .invisible) {
    pointer-events: none;
  }
  #nav ul li.invisible {
    transform: translateX(200px);
    pointer-events: none;
    opacity: 0;
  }
  .nav-mobile {
    display: inline-flex;
  }
  .nav-mobile.cta {
    background: var(--accent);
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .close-mobile {
    display: flex;
  }
}

/* Footer */
#footer {
  background: var(--footer);
  position: relative;
  padding-block: 64px;
}

#footer * {
  color: #ffffff;
}

.footer-content {
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
  align-items: start;
}

.footer-content-left {
  align-items: start;
  gap: 24px;
}

.footer-name-slogan {
  align-items: start;
  position: relative;
  gap: 0px;
}

.footer-name-slogan::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 25%;
  height: 2px;
  opacity: 0.5;
  background: var(--accent);
}

.footer-contact {
  align-items: start;
  justify-content: start;
  gap: 8px;
}

.footer-socials {
  flex-direction: row;
  gap: 8px;
  justify-content: start;
  align-items: start;
}

.footer-content-right {
  align-items: end;
  align-self: center;
}

.footer-content-right ul {
  text-align: end;
  list-style-type: none;
}

.footer-copyright {
  opacity: 0.25;
}

#footer a {
  transition: 0.3s;
  opacity: 1;
}

#footer a:hover {
  opacity: 0.75;
}

@media (max-width: 970px) {
  #footer a,
  #footer p {
    font-size: 14px;
  }

  .gs-card-container  {
    /* height: 200px; */
    /* background-color: #26aa15; */
  }
  div.gs-card > img {
  height: 200px;
  /* width: 200px; */
}

}


/* Landpage Hero */
#landpage {
  padding-top: calc(96px + 80px);
  position: relative;
  gap: 64px;
  z-index: 10;
  overflow: hidden;
}

#landpage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: -5;
  background: url(/img/bg.png);
  animation: hero-bg 10s ease-in-out infinite;
}

@keyframes hero-bg {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
  }
}

#landpage .pack {
  gap: 32px;
}

#landpage .pack * {
  text-align: center;
}

@media (max-width: 970px) {
  #landpage {
    padding-top: 128px;
  }

  
}

/* What We Offer */
#what-we-offer {
  background-color: var(--main-neutral);
  z-index: 1;
}

.offer-features-container {
  flex-direction: row;
  gap: 96px;
}
.offer-features-container .pack img {
  width: min(400px, 100%);
}

.offer-content-group {
  align-items: flex-start;
  gap: 32px;
  max-width: 400px;
}

#what-we-offer h2 span.monospace {
  opacity: 0.75;
  color: var(--text);
}

.feature-heading-group {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.feature-description-row {
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
}

.description-icon {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}

.feature-description {
  max-width: 400px;
  flex: 1;
}

.feature-detail-container {
  flex-direction: row;
  gap: 24px;
}

.feature-detail-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.feature-detail-text {
  flex: 1;
}

.feature-point-icon {
  background: var(--secondary);
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
  color: #ffffff;
}

.feature-point-icon i {
  font-size: 14px;
}

.offer-footer {
  gap: 16px;
}

@media (max-width: 1300px) {
  .offer-features-container {
    flex-direction: column;
    gap: 64px;
  }
  .offer-content-group {
    max-width: unset;
    align-items: center;
  }
  .description-icon {
    display: none !important;
  }
  .feature-description,
  .feature-title {
    text-align: center;
  }
  .feature-heading-group {
    align-items: center;
  }
}

/* Ratings */
.ratings-container {
  flex-direction: row;
  justify-content: center;
  gap: 64px;
  align-items: stretch;
  flex-wrap: wrap;
}

.rating-card {
  justify-content: space-between;
  gap: 16px;
}

.rating-card-upper {
  gap: 32px;
}

.rating-stars {
  flex-direction: row;
  gap: 8px;
}

.rating-stars i {
  font-size: 32px;
  color: #ede15d;
}

.rating-text {
  max-width: 300px;
  text-align: center;
}

.rating-client {
  display: block;
  text-align: center;
}

/* Get Started */
#get-started {
  background-color: var(--main-neutral);
}

.gs-head {
  gap: 64px;
}

.gs-progress {
  flex-direction: row;
  gap: 0;
  width: 90%;
}

.gs-progress-stop {
  display: flex;
  height: 64px;
  width: 64px;
  border-radius: 64px;
  color: #ffffff;
  background: var(--secondary);
  opacity: 0.5;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  position: relative;
  transition: 0.3s ease-in-out;
  transition-delay: 0.4s;
}

.gs-progress-stop i {
  z-index: 2;
}

.gs-progress-stop::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 0%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 64px;
  background: var(--primary);
  transition: 0.3s ease-in-out;
  transition-delay: 0.4s;
}

.gs-progress-stop-done {
  opacity: 1;
}

.gs-progress-stop-done::after {
  width: 100%;
  height: 100%;
}

.gs-progress-bar {
  width: calc((100% - (4 * 64px)) / 3);
  position: relative;
  height: 4px;
}

.gs-progress-bar div:first-child {
  width: 100%;
  height: 4px;
  background: var(--secondary);
  opacity: 0.5;
  z-index: 1;
  position: relative;
}

.gs-progress-bar div:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  opacity: 1;
  z-index: 2;
  background: var(--primary);
  border-radius: 0 4px 4px 0;
  transition: 0.5s ease-in-out;
}

.gs-progress-bar.gs-inprogress div:last-child {
  width: 50%;
  transition-delay: 0.6s;
}

.gs-progress-bar.gs-done div:last-child {
  width: 100%;
  border-radius: 0;
}

.gs-card-container {
  position: relative;
  width: 100%;
}

.gs-card {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -20px);
  width: 100%;
  flex-direction: row;
  gap: 64px;
  flex-wrap: wrap;
  opacity: 0;
  z-index: 1;
  transition: 0.5s;
}

.gs-card.gs-card-active {
  opacity: 1;
  position: relative;
  z-index: 2;
  transition-delay: 0.5s;
  transform: translate(-50%, 0);
}

.gs-card-container i {
  /* width: min(100%, 500px); */
  font-size: 150px;
  width: 256px;
  text-align: center;
  line-height: normal;
  color: var(--brandGreen);
  height: max-content;
  


}

.gs-card-content {
  gap: 32px;
  display: grid;
  align-items: start;
  width: min(100%, 500px);
}

.gs-text {
  gap: 16px;
  display: grid;
  justify-self: center;
  align-items: start;
}

.gs-text > h2 {
  justify-self: center;
}

.gs-buttons {
  flex-direction: row;
  gap: 16px;
}

@media (max-width: 970px) {
  .gs-progress-stop {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  .gs-progress-bar {
    width: calc((100% - (4 * 48px)) / 3);
  }
}

/* Our Mission */
.om-container {
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 64px;
}

.om-left {
  width: 400px;
}

.om-right,
.om-right div {
  width: min(600px, 100%);
  align-items: start;
  gap: 32px;
}

.om-right * {
  text-align: start;
}

@media (max-width: 970px) {
  .om-container {
    gap: 48px;
  }
}

/* Subjects We Offer */
#subjects-we-offer {
  background: var(--main-neutral);
  position: relative;
  padding-inline: 0;
  overflow: hidden;
}

.subjects-container {
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: start;
  overflow: hidden;
  position: relative;
}

.subjects-container .card-group {
  flex-direction: row;
  gap: 64px;
  padding-right: 64px;
  align-items: start;
  justify-content: start;
  will-change: transform;
  animation: scrolling 20s linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.subject-card {
  gap: 8px;
}

.subject-card img {
  width: 300px;
}

.subject-card > .pack {
  gap: 16px;
  position: relative;
  text-align: center;
}


.pack > p {
  padding: 0;
}

.pack > h2 {
  padding: 20px 0px 0px 0px ;
}

.subject-bubbles {
  flex-direction: row;
  list-style-type: none;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 200px;
  font-weight: 300;
  gap: 8px;
}

.subject-bubbles li {
  color: #ffffff;
  background: var(--primary);
  padding: 8px 16px;
  border-radius: 30px;
}

@media (max-width: 970px) {
  .subject-card img {
    width: unset;
  }
  .subjects-container .card-group {
    gap: 32px;
    padding-right: 32px;
  }
}

/* Our Tutors */
#our-tutors {
  overflow-x: hidden;
  padding-inline: 0;
}

#our-tutors .shpack {
  padding-inline: 32px;
}

#our-tutors .shpack p.thin {
  max-width: 600px;
  text-align: center;
}

.tutor-container {
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: end;
  align-items: start;
  overflow: hidden;
  position: relative;
}

.tutor-container .tutor-group {
  flex-direction: row;
  gap: 64px;
  padding-right: 64px;
  align-items: start;
  justify-content: end;
  animation: tutor-scrolling 20s linear infinite;
}

.tutor-card {
  width: 350px;
  gap: 32px;
}

.tutor-card .tutor-upper {
  gap: 16px;
}

.tutor-card .tutor-upper .tutor-name-date {
  gap: 8px;
}

.tutor-card .tutor-upper p {
  text-align: justify;
}

.tutor-card .tutor-lower {
  flex-direction: row;
  gap: 8px;
  list-style-type: none;
}

.tutor-card .tutor-lower li {
  padding: 8px 16px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 32px;
  font-weight: 300;
}

@keyframes tutor-scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Our Advantages */
#our-advantages {
  gap: 96px;
  background: var(--main-neutral);
}

#our-advantages .shpack p.thin {
  max-width: 600px;
  text-align: center;
}

.advantages {
  width: 100%;
  justify-content: start;
  gap: 128px;
  padding-inline: 10vw;
  position: relative;
  padding: 30px;
}

.advantages > div:nth-of-type(odd) {
  align-self: flex-start;
  flex-direction: row;
  padding: 0px 0px 0px 90px ;
}

.advantages > div:nth-of-type(even) {
  align-self: flex-end;
  flex-direction: row-reverse;
  padding: 0px 90px 0px 0px ;
}

/* .advantages > div:last-child { */
  /* align-self: center; */
/* } */

.advantage {
  gap: calc(20vw);
}

.advantage > .pack {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-direction: row;
  width: min(600px, 100%);
}

.advantage i {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  border-radius: 64px;
  color: #ffffff;
  background: var(--primary);
  opacity: 0.5;
  flex-shrink: 0;
  flex-grow: 0;
}

.advantage .text-content {
  gap: 16px;
  justify-content: center;
  align-items: start;
  flex-direction: column !important;
}

#find-a-tutor i {
  background-color: #00000005;
  position: absolute;
  font-size: 300px;
  z-index: -1;
  color: var(--primary-plain);
  top: 50%;
  right: 50%;
  transform: translateY(-50%);
  opacity: 0.15;
}

@media (max-width: 1200px) {
  .advantage i {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .advantages {
    width: unset;
    align-items: start;
    gap: 64px;
  }
  .advantage {
    width: 100%;
    justify-content: start;
  }
  .advantage > .pack {
    align-self: flex-start !important;
    justify-content: start;
    gap: 16px;
  }
  .advantage .text-content {
    gap: 0;
  }
}

/* About Find a Tutor */
#find-a-tutor {
  gap: 32px;
  position: relative;
}
#find-a-tutor .shpack p {
  max-width: 850px;
  text-align: center;
}
#find-a-tutor i {
  position: absolute;
  font-size: 300px;
  z-index: -1;
  color: var(--primary-plain);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.15;
}

/* Contact Get In Touch */
#contact {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  padding-top: calc(96px + 40px);
  gap: 96px;
  background-color: #ffffff;
}
#contact::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 1px;
  background-color: #1d1d1d30;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
#contact img {
  width: min(100%, 500px);
  flex-shrink: 1;
}
.contact-form {
  align-items: start;
  gap: 16px;
  position: relative;
  width: min(500px, 100%);
}

.contact-form .input-group {
  width: 100%;
}
.contact-text-container {
  gap: 16px;
  align-items: start;
}
.contact-text-container .hpack {
  flex-direction: row;
  gap: 16px;
  justify-content: start;
  align-items: center;
}
.contact-text-container .hpack .hicon {
  opacity: 1;
  color: var(--accent-plain);
}
.contact-text-container .hpack h1 .hl {
  color: var(--accent-plain);
  -webkit-text-fill-color: unset;
  -webkit-background-clip: unset;
  background: unset;
  text-wrap: nowrap;
}
.contact-text-container p {
  text-align: justify;
  max-width: 500px;
}
.contact-input-container {
  align-items: start;
  width: 100%;
  gap: 32px;
  padding-top: 24px;
}

@media (max-width: 1080px) {
  #contact {
    flex-direction: column-reverse;
    gap: 32px;
  }
  #contact img {
    width: 200px;
  }
  .contact-text-container {
    align-items: center;
  }
  .contact-text-container p {
    text-align: center;
  }
  .contact-input-container {
    align-items: center;
  }
}

/* Other Contact */
#other-contact {
  gap: 32px;
  background-color: #ffffff;
}
#other-contact .hpack {
  flex-direction: row;
  gap: 16px;
  justify-content: start;
  align-items: center;
}
#other-contact .hpack h2 {
  color: var(--secondary-plain);
}

#other-contact .hpack .hicon {
  opacity: 1;
  color: var(--secondary-plain);
  font-size: 48px;
}

#other-contact .phone-emails {
  align-items: start;
  list-style-type: none;
}
#other-contact .contact-socials {
  flex-direction: row;
  gap: 16px;
}
#other-contact .contact-socials i {
  font-size: 24px;
  color: var(--secondary-plain);
  transition: 0.3s ease-in-out;
}
#other-contact .contact-socials a:hover i {
  color: var(--accent-plain);
  scale: 1.1;
  text-shadow: 0px 4px 10px #00000011;
}

/* FAQ */
#faq {
  padding-top: calc(96px + 40px);
  background: #ffffff;
}

.faq-question-container {
  width: min(850px, 100%);
  gap: 32px;
}

.faq-question {
  position: relative;
  width: 100%;
  z-index: 1;
  padding: 32px 48px;
  align-items: start;
  gap: 64px;
  overflow: hidden;
  border: solid #33804d30 1px;
  box-shadow: 0px 10px 10px #00000008;
  border-radius: 12px;
  background: var(--secondary-10p);
  justify-content: start;
  transition: 0.5s !important;
  cursor: pointer;
}

.faq-question.unpack {
  height: unset;
  background: var(--primary-10p);
}
.faq-question .pack {
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.faq-question .pack i {
  background-color: transparent;
  transition: 0.3s;
}
.faq-question.unpack .pack i {
  rotate: -90deg;
}
.faq-question .pack i {
  position: relative;
  font-size: 32px;
}
.faq-question p {
  text-align: left;
  position: relative;
  width: 100%;
}
.faq-question p::after {
  content: "";
  position: absolute;
  height: 1px;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: #33804d30;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .faq-question {
    padding: 24px 32px;
    gap: 48px;
  }
  .faq-question .pack {
    gap: 32px;
  }
  .faq-question .pack i {
    font-size: 24px;
  }
  .faq-question .pack h3 {
    font-size: clamp(16px, 3vw, 32px);
    text-align: start;
  }
  .faq-question p::after {
    top: -24px;
  }
}

section#did-not-find-question {
  background: var(--primary);
  width: 0%;
  width: 100vw
}
#did-not-find-question .shpack .hpack h1 {
  color: #ffffff !important;
}
#did-not-find-question .shpack .hpack .hicon {
  color: #fff;
}
#did-not-find-question .shpack p,
#did-not-find-question .shpack a {
  color: #ffffff;
  text-align: center;
}

/* BECOME A TUTOR */

#become-a-tutor {
  background: var(--main-neutral);
  padding-top: calc(96px + 40px);
  gap: 32px;
}

.wt-cards {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 64px;
}
.wt-card {
  width: min(100%, 400px);
  border: 1px solid #1d1d1d1d;
  border-radius: 12px;
  gap: 16px;
  padding: 64px 32px;
  text-align: center;
  box-shadow: 1px 4px 10px #1d1d1d1d;
  transition: 0.5s ease-in-out;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.wt-card::before {
  content: "";
  z-index: -2;
  background: #ffffffbb;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s ease-in-out;
}
.wt-card::after {
  content: "";
  z-index: -1;
  background: var(--primary);
  border-radius: 500px;
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  transition: 0.5s ease-in-out;
}
.wt-card i {
  font-size: 128px;
  margin-bottom: 16px;
  color: var(--accent-plain);
  transition: 0.5s ease-in-out;
}
.wt-card h3 {
  color: var(--accent-plain);
  transition: 0.5s ease-in-out;
}
.wt-card p {
  transition: 0.5s ease-in-out;
  opacity: 0.75;
}
.wt-card:hover {
  transform: translateY(-10px) scale(1.1);
  box-shadow: 0px 10px 20px #1d1d1d33;
}
.wt-card:hover h3,
.wt-card:hover p,
.wt-card:hover i {
  color: #ffffff;
}
.wt-card:hover:after {
  width: 800px;
  height: 800px;
}

#why-tutor {
  gap: 64px;
}
#why-tutor .hpack {
  flex-direction: row;
  gap: 16px;
}
#why-tutor .hpack i {
  font-size: 48px;
  color: var(--primary-plain);
  opacity: 1;
}
#why-tutor .hpack h2 {
  color: var(--primary-plain);
}

#tutor-app {
  background: url(/img/become-a-tutor.png);
}

.tutor-app-form {
  min-height: 600px;
  width: min(100%, 500px);
  background: #ffffff99;
  box-shadow: 1px 4px 10px #1d1d1d10;
  border: 1px solid #1d1d1d1d;
  border-radius: 12px;
  backdrop-filter: blur(20px);
  justify-content: start;
  padding: 64px 64px;
  gap: 32px;
}
.tutor-app-form .buttons {
  flex-direction: row;
  justify-content: space-between;
  transition: 0.3s ease-in-out;
  width: 100%;
  gap: 16px;
}

.tutor-app-form .hpack i {
  color: var(--primary-plain);
  font-size: 48px;
}
.tutor-app-form .hpack h2 {
  color: var(--primary-plain);
}
.tapp-inputs {
  gap: 32px;
  width: 100%;
  animation: tapp-fade-in 0.5s ease-out forwards;
}

@keyframes tapp-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tapp-inputs.tapp-fade-out {
  animation: tapp-fade-out 0.3s ease-in forwards;
}

@keyframes tapp-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
.tapp-inputs .input-group {
  width: 100%;
}
#tapp-page2 > .pack {
  gap: 8px;
  align-items: start;
}

@media (max-width: 600px) {
  #tutor-app {
    padding: 0;
    background: var(--main-neutral);
  }
  .tutor-app-form {
    border: unset;
    box-shadow: unset;
    backdrop-filter: unset;
    border-radius: 0;
    padding-inline: 32px;
    padding-block: 80px;
  }
}

/* PRICING & ORDER */
#pricing-header {
  padding-top: calc(96px + 80px);
  position: relative;
  gap: 32px;
  z-index: 10;
  overflow: hidden;
}

#pricing-header::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: -5;
  background: url(/img/bg.png);
  animation: pricing-bg 10s ease-in-out infinite;
}
#pricing-header::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  width: 100%;
  height: 50%;
  z-index: -3;
  background: linear-gradient(0deg, #ffffffff, #ffffff00);
}

@keyframes pricing-bg {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
  }
}
#pricing-header > .pack {
  gap: 32px;
}

#pricing-footer {
  background: var(--main-neutral);
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 64px;
}

.plan-card {
  background: var(--main-neutral);
  border: 1px solid #efefef;
  overflow: visible;
  border-radius: 12px;
  width: min(333px, 100%);
  gap: 0;
  transition: 0.3s ease-in-out;
  box-shadow: 1px 10px 10px #1d1d1d1d;
  position: relative;
}
.plan-card .tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  border-radius: 64px;
  padding: 8px 24px;
  color: #ffffff;
}
.plan-card:hover {
  transform: translate(0, -10px) scale(1.05);
  box-shadow: 1px 10px 20px #1d1d1d2d;
}
.plan-card-container {
  padding: 48px;
  gap: 48px;
  align-items: start;
  justify-content: space-between;
  height: 100%;
}
.plan-card-details {
  align-items: start;
  gap: 8px;
}
.plan-card-rating {
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 8px;
}
.plan-card-rating i {
  color: var(--secondary-plain);
}
.plan-card-details ul {
  list-style-type: none;
  gap: 16px;
  align-items: start;
}
.plan-card-details ul li i {
  padding-right: 4px;
  opacity: 0.5;
}
.plan-card-details h2 {
  font-weight: 500;
  padding-top: 16px;
}
.plan-card-price {
  align-items: start;
  gap: 0px;
}
.plan-card-price h2 {
  font-weight: 800;
  line-height: 1em;
}
.plan-card button {
  width: 100%;
  border-radius: 0;
  padding: 16px !important;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 500;
  border: unset;
  border-top: 1px solid #efefef !important;
  scale: 1.01;
  transition: 0.5s ease;
  border-radius: 0 0 12px 12px;
}
.plan-card button::before {
  transition: 0.5s ease;
}

/* TUTOR ORDER */
#tutor-order {
  height: 100vh;
  justify-content: center;
  background-color: var(--main-neutral);
  align-items: center;
}
#tutor-order form {
  width: min(600px, 100%);
  gap: 48px;
  position: relative;
}
#tutor-order form > div,
#tutor-order form > div > div {
  width: 100%;
}
#tutor-order form .buttons {
  flex-direction: row;
  justify-content: space-between;
  transition: 0.3s ease-in-out;
  width: 100%;
  gap: 16px;
}
#order-group2 {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  gap: 8px;
}
#order-group2 > div {
  justify-content: start;
}
#order-group3 {
  gap: 32px;
}
.order-fade-in {
  animation: order-fade-in 0.5s ease-out forwards;
}

.order-fade-out {
  animation: order-fade-out 0.3s ease-in forwards;
}

@keyframes order-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes order-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.recap-group {
  padding: 16px;
  border-radius: 12px;
  gap: 4px;
  align-items: center;
}

.recap-group p {
  opacity: 0.7;
}